<template>
	<div class="categoryTab2 ">
		<div class="categoryTab2-top">
			<img src="img/tab2-4.webp"/>
			<p>
				<span>长隆野生动物世界——《爸爸去哪儿》拍摄地</span>
				
				<em>￥286</em>
				
			</p>
		</div>
			<div class="categoryTab2-bottom swiper">
				<ol class="swiper-wrapper">
					<li v-for="(list,index) in pages" :key="index" class="swiper-slide">
						<img :src="list.imgURL" />
						<aside>
							<h3>{{list.title}}</h3>
							<label>{{list.msg}}</label>
							<p>￥{{list.price}}起</p>
							<em>{{list.city}}</em>
						</aside>
						
						
					</li>
				</ol>
			</div>
	</div>
</template>

<script>

	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'CategoryTab2',
		data(){
			return{
				tabs2List : []
			}
		},
		created(){
			let that = this;
			this.axios.get('/api/dataHome.json').then((res)=>{
				
				that.tabs2List = res.data.Homemsg[0].CategoryList.CategoryTab2_List;
				
			} ).catch( (error)=>{
				
				console.log(error)
			} )
		},
		computed:{
			pages(){
				let arr=[];
				this.tabs2List.forEach((item,index)=>{
					if(index>0){
						arr.push(item)
					}

				})
				return arr;
			}
		},
		updated(){
			new Swiper('.categoryTab2-bottom',{
				 slidesPerView: 3,
			})
		},
		
	}
</script>

<style scoped>
	.categoryTab2{
		width: 100%;
		height: 8rem;
	}
	.categoryTab2-top{
		
		width: 100%;
		height: 4rem;
		
	}
	.categoryTab2-top img{
		margin-top: 0.5rem;
		border-radius: 0.3rem 0.3rem 0 0;
		width: 90%;
		position: absolute;
	}
	.categoryTab2-top p{
		position: relative;
		background-color: rgb(0,0,0,0.6);
		top: 3.1rem;
		color: white;
		line-height: 0.8rem;
	}
	.categoryTab2-top em{
		margin-left: 1.5rem;
		color: #df6f32;
	}
	

	
	.categoryTab2-bottom ol li{
		padding:  0.2rem 1.6%;
		width: 30%;
		float: left;
		position: relative;
		
	}
	
	.categoryTab2-bottom img{
		width: 100%;
		height:2rem;
		border-radius: 0.2rem;
		
	}
	.categoryTab2-bottom aside{
		line-height: 0.5rem;
	}
	.categoryTab2-bottom h3{
		text-indent: 0.2rem;
		font-weight: bold;
		
	}
	.categoryTab2-bottom label{
		display: -webkit-box;
		-webkit-line-clamp: 1;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: gray;
		text-indent: 0.2rem;
	}
	.categoryTab2-bottom p{
		text-indent: 0.2rem;
		color: #DF6F32;
	}
	.categoryTab2-bottom em{
		width: 1.5rem;
		height: 0.5rem;
		text-align: center;
		position: absolute;
		top: 0.2rem;
		background-color: rgb(0,0,0,0.6);
		color: white;
		border-radius: 0.2rem 0 0.2rem 0;
	}
</style>
